<template>
  <div class="home-left-nav">
    <div class="logo" @click="$to('homePage')"></div>
    <el-row class="tac">
      <el-col>
        <el-menu
          :router="true"
          text-color="#d8dce5"
          class="el-menu-vertical-demo"
          background-color="#555"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :class="[]"
          :default-active="routeName"
          :default-openeds="defaultOpeneds"
          @open="handleOpen"
          @select="handleSelect"
          >
          <el-menu-item index="/homePage" class="title home-page"><i class="el-icon-view"></i>首  页</el-menu-item>
          <!-- <el-menu-item v-else index="/homePage" class="title homepage"><i class="iconfont icon-wxbmingxingdianpu"></i></el-menu-item> -->
          <el-submenu v-if="roles.includes(7)" index="1">
            <template slot="title">
              <i class="iconfont icon-account"></i>
              <span slot="title"> <i class="el-icon-goods"></i>商品管理</span>
            </template>
            <el-menu-item v-if="roles.includes(8)" index="/produceCategory">商品分类</el-menu-item>
            <el-menu-item v-if="roles.includes(9)" index="/produceList">商品列表</el-menu-item>
            <el-menu-item v-if="roles.includes(10)" index="/produceHas">商品库存</el-menu-item>
            <el-menu-item v-if="roles.includes(11)" index="/produceIn">商品入库</el-menu-item>
            <el-menu-item v-if="roles.includes(12)" index="/produceOut">商品出库</el-menu-item>
            <el-menu-item v-if="roles.includes(13)" index="/goodsDetail">出入库明细</el-menu-item>
            <el-menu-item v-if="roles.includes(14)" index="/compare">库存盘点</el-menu-item>
          </el-submenu>

          <el-submenu v-if="roles.includes(15)" index="2">
            <template slot="title">
              <i class="iconfont icon-account"></i>
              <span slot="title"> <i class="el-icon-document"></i>订单管理</span>
            </template>
            <el-menu-item v-if="roles.includes(38)" index="/customerList">客户列表</el-menu-item>
            <el-menu-item v-if="roles.includes(16)" index="/order">订货单</el-menu-item>
            <el-menu-item v-if="roles.includes(17)" index="/productList">生产单</el-menu-item>
            <el-menu-item v-if="roles.includes(18)" index="/orderGoods">订单商品统计</el-menu-item>
          </el-submenu>

          <el-submenu v-if="roles.includes(19)" index="3">
            <template slot="title">
              <i class="iconfont icon-account"></i>
              <span slot="title"> <i class="el-icon-news"></i>配料管理</span>
            </template>
            <el-menu-item v-if="roles.includes(20)" index="/accessList">配料列表</el-menu-item>
            <el-menu-item v-if="roles.includes(21)" index="/accessStock">配料库存</el-menu-item>
            <el-menu-item v-if="roles.includes(22)" index="/accessIn">配料入库</el-menu-item>
            <el-menu-item v-if="roles.includes(23)" index="/accessOut">配料出库</el-menu-item>
            <el-menu-item v-if="roles.includes(24)" index="/accessInOut">出入库明细</el-menu-item>
            <el-menu-item v-if="roles.includes(25)" index="/accessCompare">库存盘点</el-menu-item>
          </el-submenu>

          <el-submenu v-if="roles.includes(26)" index="4">
            <template slot="title">
              <i class="iconfont icon-account"></i>
              <span slot="title"> <i class="el-icon-tickets"></i>配料采购</span>
            </template>
            <el-menu-item v-if="roles.includes(27)" index="/supplierList">供应商列表</el-menu-item>
            <el-menu-item v-if="roles.includes(28)" index="/supplierOrder">采购订单</el-menu-item>
            <el-menu-item v-if="roles.includes(29)" index="/supplierReturn">采购退货</el-menu-item>
            <el-menu-item v-if="roles.includes(30)" index="/supplierSummary">采购汇总</el-menu-item>
          </el-submenu>

          <el-submenu v-if="roles.includes(31)" index="5">
            <template slot="title">
              <i class="iconfont icon-account"></i>
              <span slot="title"> <i class="el-icon-menu"></i>辅件管理</span>
            </template>
            <el-menu-item v-if="roles.includes(32)" index="/auxiliaryList">辅件列表</el-menu-item>
            <el-menu-item v-if="roles.includes(33)" index="/auxiliaryStock">辅件库存</el-menu-item>
            <el-menu-item v-if="roles.includes(34)" index="/auxiliaryIn">辅件入库</el-menu-item>
            <el-menu-item v-if="roles.includes(35)" index="/auxiliaryOut">辅件出库</el-menu-item>
            <el-menu-item v-if="roles.includes(36)" index="/auxiliaryInOut">出入库明细</el-menu-item>
            <el-menu-item v-if="roles.includes(37)" index="/auxiliaryCompare">库存盘点</el-menu-item>
          </el-submenu>

          <el-submenu v-if="roles.includes(1)" index="6">
            <template slot="title">
              <i class="iconfont icon-account"></i>
              <span slot="title"> <i class="el-icon-setting"></i>系统设置</span>
            </template>
            <el-menu-item v-if="roles.includes(2)" index="/accountList">账户列表</el-menu-item>
            <el-menu-item v-if="roles.includes(3)" index="/roleList">角色列表</el-menu-item>
            <el-menu-item v-if="roles.includes(4)" index="/logList">日志记录</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
@Component({
  components: {}
})
export default class HomePageRightNav extends Vue {
  // data
  routeName: string = '1';
  defaultOpeneds: any[] = [];
  roles: any[] = [];
  $route!: any;
  @Watch('$route')
  routeChange(to: any, from: any) {
    this.routeName = to.path;
    if (to.path === '/homePage') {
      this.defaultOpeneds = [];
    }
  }
  mounted() {
    this.routeName = this.$route.path;
    let temp: any = sessionStorage.getItem('roles');
    this.roles = JSON.parse(temp);
  }
  handleOpen(index: string): void {
    // console.log(index);
    // this.activeMenu = index;
  }
  handleSelect(key: string) {
    if (key === '/homePage') {
      this.defaultOpeneds = [];
    }
  }
}
</script>
<style lang="less">
.home-left-nav {
  user-select: none;
  height: 100%;
  .el-submenu {
    .el-submenu__title {
      text-align: left;
    }
    .el-menu-item {
      width: 100%;
      box-sizing: border-box;
      min-width: 100%;
      text-align: left;
    }
  }
  .el-menu {
    border: none;
  }
  .is-opened {
    .el-submenu__title {
      color: #ffd04b !important;
    }
  }
  .home-page {
    // text-align: center;
    font-size: 16px;
    font-weight: 600;
    background-color: rgb(85, 85, 85) !important;
  }
  .logo {
    background-image: url('../../public/logo.png');
    margin: 10px auto 0;
    // border: 1px solid #fff;
    width: 62px;
    height: 55px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
  }
}
</style>
